<template>
    <div class="less space-full">
        <div class="step">
            <h3>一、下载依赖包</h3>
            <div class="describe">npm i less-loader less --save-dev</div><br/>
            <div class="describe">npm i style-resources-loader --save-dev</div>
        </div>
        <div class="step">
            <h3>二、在vue.config.js文件内引入</h3>
            <div class="describe">const path = require('path')</div>
        </div>
        <div class="step">
            <h3>三、配置pluginOptions</h3>
            <div class="describe">
                <pre>
    module.exports = {

        pluginOptions: {

            'style-resources-loader': {

                preProcessor: 'less',

                patterns: [path.resolve(__dirname, './src/styles/global.less')]

            }

        }

    }
                </pre>
            </div>
        </div>
        <div class="code-show">
            <h3>代码截图</h3>
            <img src="../../../asset/images/code.png" />
        </div>
    </div>
</template>
<script>
export default {
  name: 'Less'
}
</script>
<style lang="less" scoped>
pre{
    font-size: 20px;
}
h3{
    line-height: 80px;
}
.less{
    overflow-y: scroll;
    .step{
        .describe{
            margin-left: 20px;
        }
    }
}
</style>
